<template>
  <div class="my-form-overlay">
    <div class="my-form">
      <div class="form-header">
        <div class="title-up">A1111</div>
        <div class="title-down">中国国际核工业展览会</div>
      </div>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="0"
        class="form-content"
      >
        <div class="content-item">
          <div class="item-title">所在展馆</div>
          <div class="item-content">
            <el-form-item prop="pavilion">
              <el-input
                v-model="formData.pavilion"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入所在展馆"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">展位号</div>
          <div class="item-content">
            <el-form-item prop="booth_number">
              <el-input
                v-model="formData.booth_number"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入展位号"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">展位类型</div>
          <div class="item-content">
            <el-form-item prop="booth_type">
              <el-input
                v-model="formData.booth_type"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入展位类型"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">展位面积</div>
          <div class="item-content">
            <el-form-item prop="booth_area">
              <el-input
                v-model="formData.booth_area"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入展位面积"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">展商名称中文</div>
          <div class="item-content">
            <el-form-item prop="company_name_cn">
              <el-input
                v-model="formData.company_name_cn"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入展商名称中文"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">展商名称英文</div>
          <div class="item-content">
            <el-form-item prop="company_name_en">
              <el-input
                v-model="formData.company_name_en"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入展商名称英文"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">产品类别</div>
          <div class="item-content">
            <el-form-item prop="product_category">
              <el-input
                v-model="formData.product_category"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入产品类别"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">展商负责人</div>
          <div class="item-content">
            <el-form-item prop="contact_person">
              <el-input
                v-model="formData.contact_person"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入展商负责人"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">负责人手机</div>
          <div class="item-content">
            <el-form-item prop="contact_phone">
              <el-input
                v-model="formData.contact_phone"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入负责人手机"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title">负责人电子邮件</div>
          <div class="item-content">
            <el-form-item prop="contact_email">
              <el-input
                v-model="formData.contact_email"
                :class="{ 'view-mode-input': props.mode === 'view' }"
                placeholder="请输入负责人电子邮件"
                :disabled="props.mode === 'view'"
              />
            </el-form-item>
          </div>
        </div>
        <div class="content-item">
          <div class="item-title-note">说明</div>
          <div class="item-content">
            如需修改参展负责人及企业基本信息，请联系组委会
          </div>
        </div>
      </el-form>
      <div class="form-footer">
        <div class="button-group">
          <button class="btn btn-cancel" @click="handleCancel">
            {{ props.mode === "view" ? "退出" : "取消" }}
          </button>
          <button
            v-if="props.mode !== 'view'"
            class="btn btn-confirm"
            @click="handleConfirm"
          >
            修改
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, reactive, watch, onMounted } from "vue";

const props = defineProps<{
  mode: "view" | "edit";
  initialData?: any;
}>();

const emit = defineEmits(["cancel", "confirm"]);

const formRef = ref();

const formData = reactive({
  id: 0, // 隐藏的id字段
  pavilion: "2", // 默认值为2
  booth_number: "",
  booth_type: "",
  booth_area: "",
  company_name_cn: "",
  company_name_en: "",
  product_category: "",
  contact_person: "",
  contact_phone: "",
  contact_email: ""
});

const formRules = {
  pavilion: [{ required: true, message: "请输入所在展馆", trigger: "change" }],
  booth_number: [
    { required: true, message: "请输入展位号", trigger: "change" }
  ],
  booth_type: [
    { required: true, message: "请输入展位类型", trigger: "change" }
  ],
  booth_area: [
    { required: true, message: "请输入展位面积", trigger: "change" }
  ],
  company_name_cn: [
    { required: true, message: "请输入展商名称中文", trigger: "change" }
  ],
  company_name_en: [
    { required: true, message: "请输入展商名称英文", trigger: "change" }
  ],
  product_category: [
    { required: true, message: "请输入产品类别", trigger: "change" }
  ],
  contact_person: [
    { required: true, message: "请输入展商负责人", trigger: "change" }
  ],
  contact_phone: [
    { required: true, message: "请输入负责人手机", trigger: "change" }
  ],
  contact_email: [
    { required: true, message: "请输入负责人电子邮件", trigger: "change" }
  ]
};

// 监听初始数据变化
watch(
  () => props.initialData,
  newData => {
    if (newData) {
      Object.assign(formData, newData);
    }
  },
  { immediate: true }
);

// 组件挂载时处理初始数据
onMounted(() => {
  if (props.initialData) {
    Object.assign(formData, props.initialData);
  }
});

const handleCancel = () => {
  emit("cancel");
};

const handleConfirm = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      // 转换数据类型
      const baseData = {
        ...formData,
        booth_area: Number(formData.booth_area)
      };

      emit("confirm", baseData);
    }
  });
};
</script>

<style lang="scss" scoped>
.my-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  background-color: rgb(0 0 0 / 50%);
}

.my-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 15%);

  .form-header {
    padding: 20px;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    .title-up {
      margin-bottom: 8px;
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }

    .title-down {
      font-size: 16px;
      font-weight: bold;
      color: #666;
    }
  }

  .form-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    :deep(.el-form-item__label) {
      display: none;
    }

    :deep(.el-form-item) {
      padding: 0 !important;
      margin-right: 0 !important;
      margin-bottom: 0 !important;
      margin-left: 0 !important;
    }

    :deep(.el-form-item__content) {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    :deep(.el-input__wrapper) {
      height: 44px;
      line-height: 44px;
      background-color: #fff;
      border: 1px solid #f4f4f4;
      border-radius: 4px;
      box-shadow: none;

      &:hover {
        border-color: #f4f4f4;
      }

      &.is-focus {
        background-color: #fff;
        border-color: #409eff;
      }
    }

    // 查看模式下的输入框样式（与发票页保持一致）
    :deep(.view-mode-input .el-input__wrapper) {
      cursor: not-allowed !important;
      background-color: #f7f7f7 !important;
      border: 2px solid #e0e0e0 !important;

      .el-input__inner {
        color: #999 !important;
        cursor: not-allowed !important;
        background-color: transparent !important;
      }
    }

    :deep(.el-input__inner) {
      height: 44px;
      padding: 0 16px;
      font-size: 16px;
      line-height: 44px;
    }

    .content-item {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 0 40px;
      margin-bottom: 20px;

      .item-title {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 44px;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        text-align: center;
        background-color: #f7f8f9;
        border-radius: 4px;
      }

      .item-content {
        flex: 1;
        max-width: 750px;
        padding: 0;
        margin: 0;

        input {
          box-sizing: border-box;
          width: 100%;
          padding: 12px 16px;
          font-size: 14px;
          background-color: #fff;
          border: 1px solid #f4f4f4;
          border-radius: 6px;

          &:focus {
            outline: none;
            background-color: #fff;
            border-color: #409eff;
          }

          &::placeholder {
            color: #999;
          }
        }
      }
    }

    .item-title-note {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 140px;
      min-width: auto !important;
      padding: 0 !important;
      font-weight: 500;
      color: #333;
      background-color: transparent !important;
      border: none !important;
    }

    .content-item:has(.item-title-note) .item-content {
      color: #ff4757;
    }
  }

  .form-footer {
    padding: 20px;
    background-color: #fff;

    .button-group {
      display: flex;
      gap: 16px;
      justify-content: center;

      .btn {
        padding: 10px 24px;
        font-size: 14px;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        transition: all 0.3s ease;

        &.btn-cancel {
          color: #666;
          background-color: #f5f5f5;
          border: 1px solid #ddd;

          &:hover {
            background-color: #e8e8e8;
            border-color: #ccc;
          }
        }

        &.btn-confirm {
          color: #fff;
          background-color: #409eff;

          &:hover {
            background-color: #337ecc;
          }
        }
      }
    }
  }
}
</style>
